<template>
	<view class="input">
		<view class="box"  >
			<view class="left">
				<view class="left_icon">
					<text class="iconfont" :class="icon" :style="{'color': iconColor}"></text>
				</view>
				<view class="input_label" :style="{'color': textColor}">
					{{ label }}
				</view>
			</view>
			<view class="right">
				<view class="input_box">
					<input :type="type" v-if="mode != 'select' && !audio" v-model="values" @input="onChange" :placeholder="placeholder" />
					<view class="picker" v-if="mode == 'select' && !audio">
						<picker @change="bindPickerChange" :value="option" :range="arr" placeholder="请选择项目">
						                        <view class="uni-input">{{arr[option]}}</view>
						</picker>
					</view>
					<!-- YINPIN -->
					<view class="audio_icon" v-if="audio">
						<text class="iconfont icon-yinpinaudio47"></text>
					</view>
				</view>
				<view class="slot_box" v-if="btn" @click="playAudio">
					<button type="primary" @click="btnClick">{{ btn }}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var audioPlay = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				
				option: 0,
				arr: ["项目1","项目2","项目3","项目4",]
				
			}
		},
		props: {
			label: String,
			values: String,
			icon: String,
			iconColor: String,
			textColor: String,
			mode: String,
			placeholder: String,
			type: String,
			btn: String,
			audio: String,
		},
		computed: {
			selVal() {
				return this.arr[this.option]
			},
			
		},
		
		mounted() {
			if(this.mode == 'select') {
				this.$emit("change", this.selVal)
			}
			//console.log(this.audio)
			audioPlay.src = audio
		},
		methods: {
			// 出发change事件
			btnClick() {
				this.$emit('btnEvent', this.inputData ? this.inputData : "")
			},
			onChange( e ) {
				 this.$emit('change', this.values)
			},
			
			// select
			bindPickerChange( e ) {
				console.log(e);
				this.option = e.detail.value
				//this.value = this.arr[e.detail.value]
				this.$emit("change", this.selVal)
			},
			// 播放mp3
			playAudio() {
				audioPlay.play()
			},
		}
	}
</script>

<style scoped lang="scss">
	.input {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		.box {
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			padding: 20rpx 0;
			.left {
				width: 190rpx;
				display: flex;
				align-items: center;
				.input_label {
					margin-left: 10rpx;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.right {
				flex: 1;
				display: flex;
				align-items: center;
				.slot_box {
					width: 100rpx;
					button {
						font-size: 20rpx;
						padding: 0;
					}
				}
				.input_box {
					flex: 1;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
